import { Box } from "@mui/system"
import React, { CSSProperties } from "react"
export interface CheckCardProps {
  value?: boolean
  onChange?: (value: boolean) => void
  changeValue?: any
  children?: any
  [key: string]: any
}
const checkedAfter: CSSProperties = {
  //opacity: 1,
  border: "10px solid #1677FF",
}
const after: CSSProperties = {
  position: "absolute",
  border: "10px solid #d9d9d9",
  insetBlockStart: "2px",
  insetInlineEnd: "2px",
  width: 0,
  height: 0,
  //opacity: 0,
  transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)",
  borderBlockEnd: "10px solid transparent!important",
  borderInlineStart: "10px solid transparent!important",
  borderStartEndRadius: "6px",
}
export default (props: CheckCardProps) => {
  const { children, changeValue, value, onChange, ...otr } = props
  return (
    <Box
      sx={{
        height: "100%",
        width: "100%",
        padding: "1px",
        position: "relative",
        border: value ? "1px solid #1677FF" : "1px solid #d9d9d9",
        backgroundColor: value ? "#e1f0ff" : void 0,
        boxSizing: "border-box",
        borderRadius: "2px",
      }}
    >
      {children}
      <Box
        onClick={() => {
          onChange && onChange(changeValue)
        }}
        sx={{ ...after, ...(value ? checkedAfter : {}) }}
      ></Box>
    </Box>
  )
}
